<template>
  <div style="display: flex; flex-direction: column; height: 100%">
    <div class="top">
      <div class="header flex-justify-end">
        <div class="search flex-align-center"
          ><el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>
          <el-input v-model.trim="input" placeholder="检索" class="input-with-select" />
          <button class="btn btn-bg1 mr5">
            <el-icon class="mr5"> <Search /> </el-icon>搜索
          </button>
        </div>
      </div>
    </div>
    <div class="app-container" style="height: 100%">
      <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
        <div class="main">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="全部">
              <div class="table">
                <el-table
                  border
                  stripe
                  resizable
                  :data="tableData"
                  style="width: 100%; position: absolute"
                  height="100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="返厂类型" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="工单公司"
                    min-width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="返厂数量"
                    width="150"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="在途数量" width="150" />
                  <el-table-column show-overflow-tooltip prop="city" label="到厂数量" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="申请时间"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="最后更新" width="200" />
                  <el-table-column prop="state" label="状态" width="90">
                    <template #default="scope"
                      ><span
                        :class="
                          scope.row.state == '待处理'
                            ? 'state1'
                            : scope.row.state == '处理中'
                            ? 'state2'
                            : scope.row.state == '已完成'
                            ? 'state3'
                            : 'state4'
                        "
                        >{{ scope.row.state }}</span
                      ></template
                    >
                  </el-table-column>
                  <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                    <template #default="scope">
                      <div class="btns">
                        <button class="btn-table bgColor1" @click="goOrder(scope.$index)"
                          >工单</button
                        >
                        <button class="btn-table bgColor2" @click="goDetail(scope.$index)"
                          >详细</button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="footer">
                <Pagination />
              </div>
            </el-tab-pane>
            <el-tab-pane label="待审核">
              <div class="table">
                <el-table
                  border
                  stripe
                  resizable
                  :data="tableData"
                  style="width: 100%; position: absolute"
                  height="100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="返厂类型" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="工单公司"
                    min-width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="返厂数量"
                    width="150"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="在途数量" width="150" />
                  <el-table-column show-overflow-tooltip prop="city" label="到厂数量" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="申请时间"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="最后更新" width="200" />
                  <el-table-column prop="state" label="状态" width="90">
                    <template #default="scope"
                      ><span
                        :class="
                          scope.row.state == '待处理'
                            ? 'state1'
                            : scope.row.state == '处理中'
                            ? 'state2'
                            : scope.row.state == '已完成'
                            ? 'state3'
                            : 'state4'
                        "
                        >{{ scope.row.state }}</span
                      ></template
                    >
                  </el-table-column>
                  <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                    <template #default="scope">
                      <div class="btns">
                        <button class="btn-table bgColor1" @click="goOrder(scope.$index)"
                          >工单</button
                        >
                        <button class="btn-table bgColor2" @click="goDetail(scope.$index)"
                          >详细</button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="footer">
                <Pagination />
              </div>
            </el-tab-pane>
            <el-tab-pane label="待返厂">
              <div class="table">
                <el-table
                  border
                  stripe
                  resizable
                  :data="tableData"
                  style="width: 100%; position: absolute"
                  height="100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="返厂类型" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="工单公司"
                    min-width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="返厂数量"
                    width="150"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="在途数量" width="150" />
                  <el-table-column show-overflow-tooltip prop="city" label="到厂数量" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="申请时间"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="最后更新" width="200" />
                  <el-table-column prop="state" label="状态" width="90">
                    <template #default="scope"
                      ><span
                        :class="
                          scope.row.state == '待处理'
                            ? 'state1'
                            : scope.row.state == '处理中'
                            ? 'state2'
                            : scope.row.state == '已完成'
                            ? 'state3'
                            : 'state4'
                        "
                        >{{ scope.row.state }}</span
                      ></template
                    >
                  </el-table-column>
                  <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                    <template #default="scope">
                      <div class="btns">
                        <button class="btn-table bgColor1" @click="goOrder(scope.$index)"
                          >工单</button
                        >
                        <button class="btn-table bgColor2" @click="goDetail(scope.$index)"
                          >详细</button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="footer">
                <Pagination />
              </div>
            </el-tab-pane>
            <el-tab-pane label="处理中">
              <div class="table">
                <el-table
                  border
                  stripe
                  resizable
                  :data="tableData"
                  style="width: 100%; position: absolute"
                  height="100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="返厂类型" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="工单公司"
                    min-width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="返厂数量"
                    width="150"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="在途数量" width="150" />
                  <el-table-column show-overflow-tooltip prop="city" label="到厂数量" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="申请时间"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="最后更新" width="200" />
                  <el-table-column prop="state" label="状态" width="90">
                    <template #default="scope"
                      ><span
                        :class="
                          scope.row.state == '待处理'
                            ? 'state1'
                            : scope.row.state == '处理中'
                            ? 'state2'
                            : scope.row.state == '已完成'
                            ? 'state3'
                            : 'state4'
                        "
                        >{{ scope.row.state }}</span
                      ></template
                    >
                  </el-table-column>
                  <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                    <template #default="scope">
                      <div class="btns">
                        <button class="btn-table bgColor1" @click="goOrder(scope.$index)"
                          >工单</button
                        >
                        <button class="btn-table bgColor2" @click="goDetail(scope.$index)"
                          >详细</button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="footer">
                <Pagination />
              </div>
            </el-tab-pane>
            <el-tab-pane label="已寄回">
              <div class="table">
                <el-table
                  border
                  stripe
                  resizable
                  :data="tableData"
                  style="width: 100%; position: absolute"
                  height="100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="返厂类型" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="工单公司"
                    min-width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="返厂数量"
                    width="150"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="在途数量" width="150" />
                  <el-table-column show-overflow-tooltip prop="city" label="到厂数量" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="申请时间"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="最后更新" width="200" />
                  <el-table-column prop="state" label="状态" width="90">
                    <template #default="scope"
                      ><span
                        :class="
                          scope.row.state == '待处理'
                            ? 'state1'
                            : scope.row.state == '处理中'
                            ? 'state2'
                            : scope.row.state == '已完成'
                            ? 'state3'
                            : 'state4'
                        "
                        >{{ scope.row.state }}</span
                      ></template
                    >
                  </el-table-column>
                  <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                    <template #default="scope">
                      <div class="btns">
                        <button class="btn-table bgColor1" @click="goOrder(scope.$index)"
                          >工单</button
                        >
                        <button class="btn-table bgColor2" @click="goDetail(scope.$index)"
                          >详细</button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="footer">
                <Pagination />
              </div>
            </el-tab-pane>
            <el-tab-pane label="已完成">
              <div class="table">
                <el-table
                  border
                  stripe
                  resizable
                  :data="tableData"
                  style="width: 100%; position: absolute"
                  height="100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="返厂类型" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="工单公司"
                    min-width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="返厂数量"
                    width="150"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="在途数量" width="150" />
                  <el-table-column show-overflow-tooltip prop="city" label="到厂数量" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="申请时间"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="最后更新" width="200" />
                  <el-table-column prop="state" label="状态" width="90">
                    <template #default="scope"
                      ><span
                        :class="
                          scope.row.state == '待处理'
                            ? 'state1'
                            : scope.row.state == '处理中'
                            ? 'state2'
                            : scope.row.state == '已完成'
                            ? 'state3'
                            : 'state4'
                        "
                        >{{ scope.row.state }}</span
                      ></template
                    >
                  </el-table-column>
                  <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                    <template #default="scope">
                      <div class="btns">
                        <button class="btn-table bgColor1" @click="goOrder(scope.$index)"
                          >工单</button
                        >
                        <button class="btn-table bgColor2" @click="goDetail(scope.$index)"
                          >详细</button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="footer">
                <Pagination />
              </div>
            </el-tab-pane>
            <el-tab-pane label="已作废">
              <div class="table">
                <el-table
                  border
                  stripe
                  resizable
                  :data="tableData"
                  style="width: 100%; position: absolute"
                  height="100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column show-overflow-tooltip prop="name" label="返厂类型" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="工单公司"
                    min-width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="返厂数量"
                    width="150"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="在途数量" width="150" />
                  <el-table-column show-overflow-tooltip prop="city" label="到厂数量" width="150" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="state"
                    label="申请时间"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="city" label="最后更新" width="200" />
                  <el-table-column prop="state" label="状态" width="90">
                    <template #default="scope"
                      ><span
                        :class="
                          scope.row.state == '待处理'
                            ? 'state1'
                            : scope.row.state == '处理中'
                            ? 'state2'
                            : scope.row.state == '已完成'
                            ? 'state3'
                            : 'state4'
                        "
                        >{{ scope.row.state }}</span
                      ></template
                    >
                  </el-table-column>
                  <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                    <template #default="scope">
                      <div class="btns">
                        <button class="btn-table bgColor1" @click="goOrder(scope.$index)"
                          >工单</button
                        >
                        <button class="btn-table bgColor2" @click="goDetail(scope.$index)"
                          >详细</button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="footer">
                <Pagination />
              </div>
            </el-tab-pane> </el-tabs
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { Search } from '@element-plus/icons-vue'
  import type { TabsPaneContext } from 'element-plus'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.returnFactoryManager.returnFactoryManager,
  })

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  const value = ref('')
  const input = ref('')
  const select = ref('')
  const router = useRouter()
  const activeName = ref('0')

  // 查看工单
  const goOrder = (n: number) => {
    // router.push({ path: '/order/odetail', query: { name: JSON.parse(tableData[n].name) } })
    router.push('/order/odetail')
  }

  // 查看详细
  const goDetail = (n: number) => {
    router.push('/factory/cdetail')
  }

  const handleClick = (tab: TabsPaneContext, event: Event) => {}

  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]

  const tableData = [
    {
      date: '2023-06-26 11:56:35',
      name: '20230626295598983',
      state: '待处理',
      city: 'Los Angeles',
      address: '上海市-市辖区-虹口区-嘉兴路街道-666666',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom111',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom222',
      state: '已完成',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-01',
      name: 'Tom333',
      state: '已取消',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom444',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom555',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom666',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom777',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom888',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom999',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom000',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tomppp',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
</script>

<style scoped lang="scss">
  @import './index';
</style>
